<template>
	<view>
		<view v-if="usage.length == 0">
			<History :info='info'></History>
		</view>
		<view class="usage" v-for="(item,index) in usage" :key="index" v-else>
			<view class="top">
				<view class="car layout">
					{{item.parking}}
				</view>
				<view class="statusSuccess" v-if="item.finish_type == 1">
					<text>待完成</text>
				</view>
				<view class="statusCancel" v-if="item.finish_type == 2">
					<text>已取消</text>
				</view>
				<view class="statusCancel" v-if="item.finish_type == 3">
					<text>已完成</text>
				</view>
			</view>
			<view class="info ">
				<view class="layout">
					<view class="booking">
						预约时间：{{item.booking_time}}
					</view>
					<view class="startTime">
						开始时间：{{item.start_time}}
					</view>
					<view class="endTime">
						结束时间：<text> {{item.end_time}}</text>
					</view>
				</view>
				<view>
				</view>
			</view>
			<view class="button">
				<u-button class="code" @click="gotoSuccess(item.parking,item.booking_time)" v-if="item.finish_type==1">
					查看通行证</u-button>
				<u-button class="cancel" @click="open(item.booking_id)" v-if="item.finish_type==1"> 取消预约</u-button>
				<u-modal v-model="show" :content="content" @confirm='cancel()' show-cancel-button></u-modal>
			</view>
		</view>
	</view>
</template>

<script>
	import History from '../../components/History.vue'
	export default {
		data() {
			return {
				usage: [],
				show: false,
				content: "取消预约",
				id: '',
				info: {
					src: '../../static/image/mine/weiyuejilu.png',
					text: '暂无预约记录'
				}
			}
		},
		methods: {
			getHistory() {
				this.$u.api.getBookingHistory().then(res => {
					if (res.meta.status == 200) {
						this.usage = res.data
					}
				})
			},
			cancel() {
				this.$u.api.cancelBooking({
					booking_id: this.id
				}).then(res => {
					if (res.meta.status == 200) {
						this.$u.toast('取消成功')
						this.getHistory()
					}
				})
			},
			// 查看通行证
			gotoSuccess(park_num, booking_time) {
				this.$u.route('pages/stall/success', {
					park_num,
					booking_time: new Date(booking_time).getTime()
				})
			},
			open(booking_id) {
				this.show = true
				this.id = booking_id
			}
		},
		components: {
			History
		},
		onShow() {
			this.getHistory()
		},
		onPullDownRefresh() {
			this.getHistory()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>

<style lang="scss" scoped>
	.usage {

		display: flex;
		flex-flow: column;
		justify-content: space-around;
		align-items: center;
		background-color: #FFFFFF;
		height: 400rpx;
		margin: 20rpx 8%;
		margin-top: 20rpx;
		border-radius: 30rpx;

		.layout {
			margin: 0 50rpx;
		}



		.top {
			// color: #007AFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			font-size: 36rpx;
			font-weight: bold;

			.car {
				font-size: 40rpx;
			}

			.statusCancel,
			.statusSuccess {
				margin-right: 30rpx;
				color: #dd524d;
				font-size: 40rpx;
			}

			.statusSuccess {
				color: $base-color;
			}
		}

		.info {
			display: flex;
			flex-flow: wrap;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			// margin-left: 30rpx;
			color: #999999;
			font-size: 32rpx;
			font-weight: 700;

			.parkNum {
				text {
					margin-left: 35rpx;
				}
			}
		}

		.button {
			width: 100%;
			// display: flex;
			// justify-content: space-evenly;
			display: flex;
		}

		.code,
		.cancel {
			// margin: 10rpx;
			background-color: $base-color;
			color: #FFFFFF;
			width: 200rpx;
		}

		.cancel {
			background-color: #999999;
		}
	}
</style>
